import React, { useState, useEffect } from 'react'
//序列分析对话框
//2022-4-4

import DialogSimple from './DialogSimple';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { Table } from 'react-bootstrap';
import moment from 'moment';
import 'moment/locale/zh-cn';

import DatePicker from "react-datepicker";
import { registerLocale, setDefaultLocale } from "react-datepicker";
import zhcn from 'date-fns/locale/zh-Cn';
registerLocale('zh-Cn', zhcn);



// lyrParams={serialDialogLyrParams}
// appCurrentROI={currentRoiObject}
// onOk={serialDialogOnOk}
// onCancel={serialDialogOnCancel}
// isOpen={serialDialogIsOpen}
// onSelectROIClick={serialDialogOnSelectROI}
// selectedROI={serialDialogSelectedROI}
function DialogSimpleSerialAnalyse(props) {

    const [validMin, setValidMin] = useState(1);
    const [validMax, setValidMax] = useState(100);
    const [fillData, setFillData] = useState(0);
    const [roiObject, setRoiObject] = useState(null);
    const [startDt, setStartDt] = useState('');
    const [stopDt, setStopDt] = useState('');
    const [repeatType, setRepeatType] = useState('n');//1-'' 2-'m' 3-'y'
    const [repeatStartDay, setRepeatStartDay] = useState(1);
    const [repeatStopDay, setRepeatStopDay] = useState(1);
    const [repeatStartMon, setRepeatStartMon] = useState(1);
    const [repeatStopMon, setRepeatStopMon] = useState(1);
    const [repeatStopNextYear, setRepeatStopNextYear] = useState(false);
    const [compositeMethod, setCompositeMethod] = useState(1);





    //初始化
    useEffect(() => {

        setValidMin(0);
        setValidMax(0);
        setFillData(0);
        setRoiObject(null);
        setStartDt('');
        setStopDt('');
        if (typeof props.lyrParams !== 'undefined'
            && props.lyrParams !== null
            && typeof props.lyrParams.bandList !== 'undefined'
            && props.lyrParams.bandList !== null
            && props.lyrParams.bandList.length > 0) {
            setValidMin(props.lyrParams.bandList[0].validMin);
            setValidMax(props.lyrParams.bandList[0].validMax);
            setFillData(props.lyrParams.bandList[0].noData);
        }

    }, [props.lyrParams]);


    //打开对话框更新 选中的ROI
    useEffect(() => {
        if (props.isOpen === true && props.selectedROI !== null) {
            setRoiObject(props.selectedROI);
        }
    }, [props.isOpen]);

    const onRepeatStartDayChange = function (e) {
        let val = e.target.value;
        if (val < 1) val = 1;
        if (val > 31) val = 31;
        setRepeatStartDay(val);
    }
    const onRepeatStopDayChange = function (e) {
        let val = e.target.value;
        if (val < 1) val = 1;
        if (val > 31) val = 31;
        setRepeatStopDay(val);
    }
    const onRepeatStartMonChange = function (e) {
        let val = e.target.value;
        if (val < 1) val = 1;
        if (val > 12) val = 12;
        setRepeatStartMon(val);
    }
    const onRepeatStopMonChange = function (e) {
        let val = e.target.value;
        if (val < 1) val = 1;
        if (val > 12) val = 12;
        setRepeatStopMon(val);
    }


    const onCancel = function () {
        props.onCancel();
    }

    const onOk = function () {
        if (props.lyrParams === null || props.lyrParams.name === '') return;
        if (startDt === null || startDt === "") {
            console.log('bad startDt');
            return;
        }
        if (stopDt === null || stopDt === "") {
            console.log('bad stopDt');
            return;
        }
        const date0 = new Date(startDt);
        const date1 = new Date(stopDt);

        let startdtvalue =
            (date0.getFullYear() * 10000 + (date0.getMonth() + 1) * 100 + date0.getDate()).toString()
            + "000000";
        let stopdtvalue =
            (date1.getFullYear() * 10000 + (date1.getMonth() + 1) * 100 + date1.getDate()).toString()
            + "000000";

        if (repeatType === 'm') {
            startdtvalue =
                (date0.getFullYear() * 10000 + (date0.getMonth() + 1) * 100 + 1).toString()
                + "000000";
            stopdtvalue =
                (date1.getFullYear() * 10000 + (date1.getMonth() + 1) * 100 + 32).toString()
                + "000000";
        } else if (repeatType === 'y') {
            startdtvalue =
                (date0.getFullYear() * 10000 + 101).toString()
                + "000000";
            stopdtvalue =
                (date1.getFullYear() * 10000 + 1232).toString()
                + "000000";
        }

        let repeatstartdtval = '0';
        let repeatstopdtval = '0';
        let nextyearval = '0';
        if (repeatType === '') return;
        if (repeatType === 'm') {
            if (repeatStartDay === '' || repeatStopDay === '') return;
            repeatstartdtval = '1900' + '0' + (100 + parseInt(repeatStartDay)) + '000000';
            repeatstopdtval = '1900' + '0' + (100 + parseInt(repeatStopDay)) + '000000';

        } else if (repeatType === 'y') {
            if (repeatStartDay === '' || repeatStopDay === '' ||
                repeatStartMon === '' || repeatStopMon === ''
            ) return;
            repeatstartdtval = '190' + (100 * (100 + parseInt(repeatStartMon)) + parseInt(repeatStartDay))
                + '000000';
            repeatstopdtval = '190' + (100 * (100 + parseInt(repeatStopMon)) + parseInt(repeatStopDay))
                + '000000';
            if (repeatStopNextYear === true) nextyearval = '1';

        }
        console.log("debug 2");
        console.log(repeatstartdtval);
        console.log(repeatstopdtval);


        //roiObject can be sys-roi , user-roi , temp-roi , null
        let roiId = "";
        let roiGeojson = "";
        if (roiObject == null) return;
        else if (roiObject.rid === 0) {
            //temp-roi
            roiGeojson = roiObject.geojson;
        } else if (roiObject.uid === 0) {
            //sys-roi
            roiId = "sys:" + roiObject.rid;
        } else {
            //user-roi
            roiId = "user:" + roiObject.rid;
        }
        if (validMin === '') {
            return;
        }
        if (validMax === '') {
            return;
        }
        if (fillData === '') {
            return;
        }

        props.onOk(
            props.lyrParams.name,
            repeatType, //'n' , 'm' , 'y'
            startdtvalue, // 14
            stopdtvalue,
            repeatstartdtval,
            repeatstopdtval,
            nextyearval,
            compositeMethod,
            roiId,
            roiGeojson,
            validMin,
            validMax,
            fillData
        );
    }

    const onStartDateChange = function (date1) {
        setStartDt(date1);
    }

    const onStopDateChange = function (date1) {
        setStopDt(date1);
    }

    //onCurrentROI Click
    const onCurrentROIClick = function () {
        setRoiObject(props.appCurrentROI);
    }


    //onClearROI click
    const onClearROIClick = function () {
        setRoiObject(null);
    }


    const renderContent = function () {
        return (
            <div style={{ margin: 'auto', marginTop: '8px' }}>
                <Form style={{ textAlign: 'center' }}>
                    <Table>
                        <tbody>
                            <tr>
                                <td>
                                    数据名称:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="text"
                                        style={{ width: '240px' }}
                                        disabled size='sm'
                                        value={(props.lyrParams !== null) ? (props.lyrParams.productDisplay.productname) : ""}
                                    />
                                </td>
                            </tr>

                            <tr>
                                <td>
                                    序列类型:
                                </td>
                                <td style={{ textAlign: "left" }}>
                                    <select value={repeatType}
                                        onChange={(e) => setRepeatType(e.target.value)}
                                        style={{ width: '240px' }}
                                    >
                                        <option value="n">实况序列</option>
                                        <option value="m">逐月序列</option>
                                        <option value="y">逐年序列</option>
                                    </select>
                                </td>
                            </tr>



                            <tr>
                                <td>
                                    {(repeatType === 'n') ? "开始日期:" : null}
                                    {(repeatType === 'm') ? "开始年月:" : null}
                                    {(repeatType === 'y') ? "开始年份:" : null}

                                </td>
                                <td style={{ textAlign: "left" }}>
                                    {
                                        (repeatType === 'n') ? (
                                            <DatePicker
                                                locale="zh-Cn"
                                                name="startDt"
                                                selected={startDt}
                                                onChange={onStartDateChange}
                                                dateFormat="yyyy-MM-dd"
                                                showMonthDropdown
                                                showYearDropdown
                                                dropdownMode="select"
                                            />
                                        ) : ""
                                    }
                                    {
                                        (repeatType === 'm') ? (
                                            <DatePicker
                                                locale="zh-Cn"
                                                name="startDt"
                                                selected={startDt}
                                                onChange={onStartDateChange}
                                                dateFormat="yyyy-MM"
                                                showMonthYearPicker
                                            />
                                        ) : ""
                                    }
                                    {
                                        (repeatType === 'y') ? (
                                            <DatePicker
                                                locale="zh-Cn"
                                                name="startDt"
                                                selected={startDt}
                                                onChange={onStartDateChange}
                                                dateFormat="yyyy"
                                                showYearPicker
                                            />
                                        ) : ""
                                    }
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    {(repeatType === 'n') ? "结束日期:" : null}
                                    {(repeatType === 'm') ? "结束年月:" : null}
                                    {(repeatType === 'y') ? "结束年份:" : null}
                                </td>
                                <td style={{ textAlign: "left" }}>
                                    {
                                        (repeatType === 'n') ? (
                                            <DatePicker
                                                locale="zh-Cn"
                                                name="stopDt"
                                                selected={stopDt}
                                                onChange={onStopDateChange}
                                                dateFormat="yyyy-MM-dd"
                                                showMonthDropdown
                                                showYearDropdown
                                                dropdownMode="select"
                                            />
                                        ) : ""
                                    }
                                    {
                                        (repeatType === 'm') ? (
                                            <DatePicker
                                                locale="zh-Cn"
                                                name="stopDt"
                                                selected={stopDt}
                                                onChange={onStopDateChange}
                                                dateFormat="yyyy-MM"
                                                showMonthYearPicker
                                            />
                                        ) : ""
                                    }
                                    {
                                        (repeatType === 'y') ? (
                                            <DatePicker
                                                locale="zh-Cn"
                                                name="stopDt"
                                                selected={stopDt}
                                                onChange={onStopDateChange}
                                                dateFormat="yyyy"
                                                showYearPicker
                                            />
                                        ) : ""
                                    }
                                </td>
                            </tr>

                            {
                                (repeatType === 'm' || repeatType === 'y') ?
                                    (
                                        <>
                                            <tr>
                                                <td>
                                                    {repeatType === 'm' ? '每月开始日期' : '每年开始日期'}:
                                                </td>
                                                <td style={{ textAlign: 'left' }}>
                                                    <Container>
                                                        <Row>

                                                            {
                                                                (repeatType === 'y') ?
                                                                    (
                                                                        <Col sm={4}>
                                                                            <InputGroup size="sm"
                                                                                style={{ width: "80px" }}>
                                                                                <Form.Control placeholder='' type="number"
                                                                                    value={repeatStartMon}
                                                                                    onChange={onRepeatStartMonChange} />
                                                                                <InputGroup.Text>月</InputGroup.Text>
                                                                            </InputGroup>

                                                                        </Col>

                                                                    ) : ""
                                                            }

                                                            <Col sm={4}>
                                                                <InputGroup size="sm"
                                                                    style={{ width: "80px" }}>
                                                                    <Form.Control placeholder='' type="number"
                                                                        value={repeatStartDay}
                                                                        onChange={onRepeatStartDayChange} />
                                                                    <InputGroup.Text>日</InputGroup.Text>
                                                                </InputGroup>
                                                            </Col>
                                                        </Row>
                                                    </Container>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    {repeatType === 'm' ? '每月结束日期' : '每年结束日期'}:
                                                </td>
                                                <td style={{ textAlign: 'left' }}>
                                                    <Container>
                                                        <Row>

                                                            {
                                                                (repeatType === 'y') ?
                                                                    (
                                                                        <Col sm={4}>
                                                                            <InputGroup size="sm"
                                                                                style={{ width: "80px" }}>
                                                                                <Form.Control
                                                                                    placeholder=''
                                                                                    type="number"
                                                                                    value={repeatStopMon}
                                                                                    onChange={onRepeatStopMonChange} />
                                                                                <InputGroup.Text>月</InputGroup.Text>
                                                                            </InputGroup>
                                                                        </Col>
                                                                    ) : ""
                                                            }

                                                            <Col sm={4}>
                                                                <InputGroup size="sm"
                                                                    style={{ width: "80px" }}
                                                                >
                                                                    <Form.Control placeholder='' type="number"
                                                                        size='sm'
                                                                        value={repeatStopDay}
                                                                        onChange={onRepeatStopDayChange} />
                                                                    <InputGroup.Text>日</InputGroup.Text>
                                                                </InputGroup>
                                                            </Col>
                                                            <Col sm={4}>
                                                                {
                                                                    (repeatType === 'y') ?
                                                                        (

                                                                            <Form.Check
                                                                                type="checkbox"
                                                                                label="下一年"
                                                                                checked={repeatStopNextYear}
                                                                                onChange={(e) => setRepeatStopNextYear(e.target.checked)}
                                                                            />

                                                                        ) : ""
                                                                }
                                                            </Col>
                                                        </Row>
                                                    </Container>




                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    {repeatType === 'y' ? '年内' : '月内'}合成方法:
                                                </td>
                                                <td style={{ textAlign: "left" }}>
                                                    <select value={compositeMethod}
                                                        style={{ width: '240px' }}
                                                        onChange={(e) => setCompositeMethod(e.target.value)}
                                                    >
                                                        <option value={1}>最小合成</option>
                                                        <option value={2}>最大合成</option>
                                                        <option value={3}>平均合成</option>
                                                        <option value={4}>累加合成</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </>

                                    ) : ""
                            }


                            <tr>
                                <td>
                                    感兴趣区*:
                                </td>
                                <td>
                                    <Form.Control placeholder='感兴趣区名称'
                                        type="text"
                                        style={{ width: '240px' }}
                                        disabled size='sm'
                                        value={(roiObject !== null) ? roiObject.name : ""}
                                    />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                </td>
                                <td>
                                    <Button size='sm' variant="success"
                                        style={{ marginRight: '8px' }}
                                        onClick={onCurrentROIClick}>当前ROI</Button>
                                    <Button size='sm' variant="secondary"
                                        style={{ marginRight: '8px' }}
                                        onClick={props.onSelectROIClick}>选择ROI</Button>
                                    <Button size='sm' variant="warning"
                                        onClick={onClearROIClick}>清除ROI</Button>
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    统计区间下限:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="number" style={{ width: '240px' }}
                                        size='sm'
                                        value={validMin}
                                        onChange={(e) => setValidMin(e.target.value)} />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    统计区间上限:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="number" style={{ width: '240px' }}
                                        size='sm' value={validMax}
                                        onChange={(e) => setValidMax(e.target.value)} />
                                </td>
                            </tr>


                            <tr>
                                <td>
                                    填充值:
                                </td>
                                <td>
                                    <Form.Control placeholder='' type="number"
                                        style={{ width: '240px' }} size='sm'
                                        value={fillData}
                                        onChange={(e) => setFillData(e.target.value)} />
                                </td>
                            </tr>
                        </tbody>

                    </Table>

                </Form>
            </div>
        )
    }


    return (
        <DialogSimple
            isOpen={props.isOpen}
            onCancel={onCancel}
            dialogTitle={"序列分析"}
            onOk={onOk}
            renderContent={renderContent}
        />
    )
}

export default DialogSimpleSerialAnalyse